<template>
	<view class="asset-management-container">
		<!-- 状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 头部区域 -->
		<view class="header">
			<view class="user-info">
				<image 
					class="avatar" 
					src="/static/个人头像.png" 
					@click="goToProfile" 
					@error="onAvatarError"
					mode="aspectFill"
				/>
				<text class="title">资产管理</text>
			</view>
			<view class="header-action" @click="showMoreOptions">
				<text class="action-icon">⧉</text>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 资产管理统计卡片 -->
			<view class="statistics-card" @click="goToAssetList">
				<view class="card-header">
					<view class="card-title">
						<text class="title-icon">🔧</text>
						<text class="title-text">资产管理</text>
					</view>
					<text class="arrow-icon">></text>
				</view>
				
				<view class="statistics-grid">
					<!-- 第一行 -->
					<view class="stat-item">
						<text class="stat-number">{{ statistics.totalDevices }}</text>
						<text class="stat-label">全部设备</text>
					</view>
					<view class="stat-item">
						<text class="stat-number normal">{{ statistics.normalDevices }}</text>
						<text class="stat-label">正常</text>
					</view>
					<view class="stat-item">
						<text class="stat-number fault">{{ statistics.faultDevices }}</text>
						<text class="stat-label">故障中</text>
					</view>
					
					<!-- 第二行 -->
					<view class="stat-item">
						<text class="stat-number">{{ statistics.idleDevices }}</text>
						<text class="stat-label">闲置中</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ statistics.scrappedDevices }}</text>
						<text class="stat-label">已报废</text>
					</view>
					<view class="stat-item">
						<text class="stat-number">{{ statistics.maintenanceDevices }}</text>
						<text class="stat-label">维护中</text>
					</view>
				</view>
			</view>

			
            
		</view>
		
		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-item" @click="goToWorkbench">
				<text class="nav-icon">⊞</text>
				<text class="nav-text">工作台</text>
			</view>
			<view class="nav-item active">
				<text class="nav-icon">📦</text>
				<text class="nav-text">资产管理</text>
			</view>
			<view class="nav-item" @click="goToFaultReport">
				<text class="nav-icon">📋</text>
				<text class="nav-text">故障报修</text>
			</view>
			<view class="nav-item" @click="goToRepairs">
				<text class="nav-icon">🔧</text>
				<text class="nav-text">故障维修</text>
				<view class="nav-badge">3</view>
			</view>
			<view class="nav-item" @click="goToMore">
				<text class="nav-icon">⋯</text>
				<text class="nav-text">更多</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navigation from '@/utils/navigation.js'
	
	export default {
		data() {
			return {
				// 资产统计数据
				statistics: {
					totalDevices: 4369,
					normalDevices: 4369,
					faultDevices: 0,
					idleDevices: 0,
					scrappedDevices: 0,
					maintenanceDevices: 0
				},
				// 维修任务数量
				maintenanceCount: 0,
				// 最近活动
				recentActivities: [
					{
						id: 1,
						type: 'add',
						icon: '➕',
						title: '新增资产',
						description: '添加了新的数控机床设备',
						time: '2小时前'
					},
					{
						id: 2,
						type: 'repair',
						icon: '🔧',
						title: '维修完成',
						description: '一车间设备维修已完成',
						time: '4小时前'
					},
					{
						id: 3,
						type: 'update',
						icon: '📝',
						title: '状态更新',
						description: '二车间设备状态更新为正常',
						time: '6小时前'
					}
				]
			}
		},
		onLoad() {
			this.loadAssetStatistics();
			this.loadMaintenanceCount();
		},
    onShow() {
      this.loadAssetStatistics();
    },
		methods: {
			// 头像加载错误处理
			onAvatarError(e) {
				console.warn('头像加载失败，使用默认头像');
				e.target.src = '/static/banner-bg.jpg';
			},
			
      // 加载资产统计数据（真实接口）
      async loadAssetStatistics() {
        try {
          const { default: assetApi } = await import('@/api/asset/asset.js');
          const res = await assetApi.getAssetStatistics();
          const d = res.data || res || {};
          this.statistics = {
            totalDevices: d.total || d.totalDevices || 0,
            normalDevices: d.normal || d.normalDevices || 0,
            faultDevices: d.fault || d.faultDevices || 0,
            idleDevices: d.idle || d.idleDevices || 0,
            scrappedDevices: d.scrapped || d.scrappedDevices || 0,
            maintenanceDevices: d.maintenance || d.maintenanceDevices || 0
          };
        } catch(e) {
          // 失败不打断页面
          console.warn('获取资产统计失败，使用本地占位', e);
        }
      },
			
      // 模拟加载统计数据（保留占位以备无后端返回时使用）
      mockLoadStatistics() {},
			
			// 加载维修任务数量
			loadMaintenanceCount() {
				// 这里可以调用后端API获取维修任务数量
				// 暂时使用模拟数据
				this.maintenanceCount = 0;
			},
			
			// 跳转到个人中心
			goToProfile() {
				uni.navigateTo({
					url: '/pages/user/profile'
				});
			},
			
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['刷新数据', '导出报表', '系统设置'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.loadAssetStatistics();
								uni.showToast({
									title: '数据已刷新',
									icon: 'success'
								});
								break;
							case 1:
								uni.showToast({
									title: '导出功能开发中',
									icon: 'none'
								});
								break;
							case 2:
								uni.showToast({
									title: '设置功能开发中',
									icon: 'none'
								});
								break;
						}
					}
				});
			},
			
			// 跳转到资产列表
			goToAssetList() {
				uni.navigateTo({
					url: '/pages/asset/list'
				});
			},
			

			// 底部导航跳转
			goToWorkbench() {
				navigation.goToWorkbench();
			},
			
			goToAssetManagement() {
				// 当前页面，不需要跳转
			},
			
			goToFaultReport() {
				navigation.goToFaultReport();
			},
			
			goToFaultMaintenance() {
				navigation.goToRepairs();
			},
			
			goToMore() {
				navigation.goToMore();
			},
			
			goToRepairs() {
				navigation.goToRepairs();
			}
		}
	}
</script>

<style>
	.asset-management-container {
		min-height: 100vh;
		background-color: #f5f5f7;
		padding-bottom: 120rpx;
	}
	
	.status-bar {
		height: 64rpx;
	}
	
	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background-color: white;
	}
	
	.user-info {
		display: flex;
		align-items: center;
		flex-direction: row;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-action {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.action-icon {
		font-size: 32rpx;
		color: #666;
	}
	
	.main-content {
		padding: 20rpx;
	}
	
	.statistics-card {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.card-title {
		display: flex;
		align-items: center;
	}
	
	.title-icon {
		font-size: 32rpx;
		margin-right: 15rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.arrow-icon {
		font-size: 28rpx;
		color: #999;
	}
	
	.statistics-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 30rpx;
	}
	
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	
	.stat-number {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.stat-number.normal {
		color: #4caf50;
	}
	
	.stat-number.fault {
		color: #f44336;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}


	
	.recent-activities {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.more-link {
		font-size: 26rpx;
		color: #007aff;
	}
	
	.activity-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.activity-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.activity-item:last-child {
		border-bottom: none;
	}
	
	.activity-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}
	
	.activity-icon.add {
		background-color: #e8f5e8;
	}
	
	.activity-icon.repair {
		background-color: #e3f2fd;
	}
	
	.activity-icon.update {
		background-color: #fff3e0;
	}
	
	.icon-text {
		font-size: 24rpx;
	}
	
	.activity-content {
		flex: 1;
	}
	
	.activity-title {
		display: block;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.activity-desc {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}
	
	.activity-time {
		display: block;
		font-size: 22rpx;
		color: #999;
	}
	
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		background-color: white;
		border-top: 1rpx solid #e5e5e5;
		padding: 10rpx 0;
		z-index: 1000;
	}
	
	.nav-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx 0;
		position: relative;
	}
	
	.nav-item.active {
		color: #007aff;
	}
	
	.nav-item.active .nav-text {
		color: #007aff;
	}
	
	.nav-icon {
		font-size: 32rpx;
		margin-bottom: 8rpx;
	}
	
	.nav-text {
		font-size: 20rpx;
		color: #666;
	}
	
	.nav-badge {
		position: absolute;
		top: 5rpx;
		right: 20rpx;
		background-color: #ff4444;
		border-radius: 50%;
		width: 32rpx;
		height: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.badge-text {
		font-size: 18rpx;
		color: white;
		font-weight: bold;
	}
	
	/* 底部导航栏 */
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #e0e0e0;
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		z-index: 9999;
		box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
		height: 120rpx;
	}
	
	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		position: relative;
		flex: 1;
		color: #999999;
		font-size: 24rpx;
		padding: 10rpx 0;
	}
	
	.nav-item.active {
		color: #007AFF;
	}
	
	.nav-item.active .nav-icon {
		color: #007AFF;
	}
	
	.nav-item.active .nav-text {
		color: #007AFF;
		font-weight: 500;
	}
	
	.nav-icon {
		font-size: 40rpx;
		margin-bottom: 5rpx;
		color: #666666;
	}
	
	.nav-text {
		font-size: 20rpx;
		color: #666666;
	}
	
	.nav-badge {
		position: absolute;
		top: 5rpx;
		right: 15rpx;
		width: 20rpx;
		height: 20rpx;
		background-color: #ff3b30;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12rpx;
		color: white;
		font-weight: bold;
		min-width: 20rpx;
		text-align: center;
		line-height: 1;
	}
</style>
